<script>

import MapDialog from "./components/MapDialog.vue";
import SaveDialog from "./components/SaveDialog.vue";
import KtMap from "/src/components/common/KtMap.vue";
import BindUserDialog from "/src/views/manage/iot/project/components/BindUserDialog.vue";
import bindUserDialog from "/src/views/manage/iot/project/components/BindUserDialog.vue";

export default {
  computed: {
    bindUserDialog() {
      return bindUserDialog
    }
  },
  components: {BindUserDialog, KtMap, SaveDialog, MapDialog},
  data() {
    return {
      mapLoaded: true,
      bodyData: [
        //     {
        //   "description": null,
        //   "gmtCreate": null,
        //   "gmtModified": null,
        //   "id": 1,
        //   "latitude": null,
        //   "longitude": null,
        //   "title": "项目1",
        //   "remark": null,
        //   "sn": null
        // }
      ],
      requestParamBind: {
        title: ""
      },
      contentLoading: true,
      type: "card",
      mapBodyData: {
        center: {
          longitude: 103.8198,
          latitude: 1.3521
        },
        markers: [
          {
            latitude: 1.3521,
            longitude: 103.8198,
            title: "新加坡"
          }
        ]
      }
    }
  },
  created() {
    this.getAll();
  },
  mounted() {

  },
  methods: {
    toDashboard(){
      // 浏览器打开新标签
      window.open("/manage/iot/dashboard/body");
    },
    // 初始化mapBodyData
    initMapBodyData() {
      this.mapLoaded = false;
      this.mapBodyData = {
        center: {
          longitude: 103.8198,
          latitude: 1.3521
        },
        markers: []
      };
      // 将bodyData中的数据转换为mapBodyData的markers
      this.bodyData.forEach(item => {
        this.mapBodyData.markers.push({
          latitude: item.latitude,
          longitude: item.longitude,
          title: item.title
        });
      });
      setTimeout(() => {
        this.mapLoaded = true;
      }, 100);
    },
    toRemove(item) {
      // 是否确定删除,
      this.$confirm(this.$i18n.zhToGlobal('是否确定删除？'), this.$i18n.zhToGlobal('提示'), {
        confirmButtonText: this.$i18n.zhToGlobal('确定'),
        cancelButtonText: this.$i18n.zhToGlobal('取消'),
        type: 'warning',
      }).then(() => {
        this.contentLoading = true;
        this.$kt.request.send({
          uri: "/business-iot-web/admin/iotProject/remove",
          data: {
            id: item.id
          },
          stateSuccess: (res) => {
            this.getAll();
            this.contentLoading = false;
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            this.contentLoading = false;
          }
        });
      }).catch(() => {
      });
    },
    toMap(item) {
      this.$refs.mapDialog.open(item.title, {
        center: {
          longitude: item.longitude,
          latitude: item.latitude
        },
        markers: [
          {
            latitude: item.latitude,
            longitude: item.longitude,
            title: ""
          }
        ]
      });
    },
    getAll() {
      this.contentLoading = true;
      this.$kt.request.send({
        uri: "/business-iot-web/admin/iotProject/getSelf",
        data: {
          // and: {
          //   field: "title",
          //   value: this.requestParamBind.title,
          //   operatorCode: "vague"
          // }
          title: this.requestParamBind.title
        },
        stateSuccess: (res) => {
          this.contentLoading = false;
          this.bodyData = res.data;
          this.initMapBodyData();
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.contentLoading = false;
        }
      });
    }
  }
}
</script>

<template>
  <div>
    <map-dialog
        ref="mapDialog"
    ></map-dialog>

    <save-dialog
        @save="getAll"
        ref="saveDialog"></save-dialog>

    <div
        style="position: relative">

      <el-form
          @submit.native.prevent
      >
        <el-form-item :label="$i18n.zhToGlobal('项目标题')">
          <el-input
              style="width: 200px"
              :placeholder="$i18n.zhToGlobal('项目标题')"
              v-model="requestParamBind.title"
              @keyup.enter.native="getAll"
          ></el-input>
        </el-form-item>
      </el-form>

      <div style="position: absolute;right: 0;top: 0">
        <!-- 刷新 -->
        <el-button
            type="primary"
            @click="getAll">
          <kt-icon
              class="el-icon-refresh"
              color="#fff"
              @click="getAll"
              icon="el-icon-refresh">
          </kt-icon>
        </el-button>

        <el-button
            type="primary"
            @click="$refs.saveDialog.open()">
          <kt-icon
              class="icon-add"
              color="#fff"
              icon="el-icon-plus">
          </kt-icon>
        </el-button>
      </div>
    </div>
    <el-scrollbar
        v-if="type === 'card'"
        v-loading="contentLoading"
        class="scrollbar-box">

      <!-- 更改头部颜色 -->
      <el-table
          :data="bodyData"
          style="width: 100%"
          border

      >
        <el-table-column
            prop="sn"
            label="SN"
            width="180">
        </el-table-column>
        <el-table-column
            prop="title"
            :label="$i18n.zhToGlobal('项目标题')"
            width="180">
        </el-table-column>
        <el-table-column
            prop="description"
            :label="$i18n.zhToGlobal('描述')">
        </el-table-column>
        <el-table-column
            :label="$i18n.zhToGlobal('经纬度')">
          <template #default="scope">
            <div
                class="card-lon-lat"
                @click="toMap(scope.row)"
            >
              <kt-icon icon="ant-icon-compass-outlined"
                       color="#000"
              ></kt-icon>
              <span style="margin-left:10px;vertical-align: top;display: inline-block">{{
                  scope.row.longitude
                }} , {{ scope.row.latitude }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            :label="$i18n.zhToGlobal('操作')"
            width="180">
          <template #default="scope">

            <div style="text-align: center">

              <div>
                <kt-icon
                    @click="$refs.saveDialog.open(scope.row)"
                    icon="ant-icon-edit-outlined"
                    color="#000"
                    class="icon-edit icon-btn"
                ></kt-icon>

                <kt-icon
                    @click="toRemove(scope.row)"
                    icon="el-icon-delete"
                    color="#ff0000"
                    style="margin-left: 20px"
                    class="icon-delete icon-btn"></kt-icon>

              </div>
              <div>
                <el-button
                    size="small"
                    @click="$refs.bindUserDialog.open(scope.row)"
                    type="primary"
                    style="margin-left: 10px;vertical-align: top"
                >{{ $i18n.zhToGlobal('绑定用户') }}
                </el-button>
              </div>

            </div>
          </template>
        </el-table-column>
      </el-table>


      <div
          v-if="false"
          class="card" v-for="item in bodyData">
        <div class="card-header">
          <div class="card-title">
            {{ item.title }}
            <span
                class="card-sn"
            >#{{ item.sn }}</span>
          </div>
        </div>
        <div class="card-body">
          <div class="card-text">
            <el-scrollbar class="scrollbar">
              <div>{{ item.description }}</div>
            </el-scrollbar>
          </div>
          <div
              class="card-lon-lat"
              @click="toMap(item)"
          >
            <kt-icon icon="ant-icon-compass-outlined"
                     color="#000"
                     style="vertical-align: bottom"
            ></kt-icon>
            {{ item.longitude }} , {{ item.latitude }}
          </div>
          <div
              style="position: absolute;bottom: 15px;right: 10px"
          >
            <kt-icon
                @click="()=>this.$refs.saveDialog.open(item)"
                icon="ant-icon-edit-outlined"
                color="#000"
                class="icon-edit icon-btn"
            ></kt-icon>
            <kt-icon
                style="margin-left: 10px"
                color="#ff0000"
                icon="el-icon-delete"
                class="icon-delete icon-btn"
                @click="toRemove(item)"
            ></kt-icon>
          </div>
        </div>
      </div>

    </el-scrollbar>

    <bind-user-dialog
    ref="bindUserDialog"
    ></bind-user-dialog>


    <div class="map-box"
         v-if="type === 'map'"
    >
      <kt-map
          v-if="mapLoaded"
          :data="mapBodyData"></kt-map>
    </div>

    <div class="bottom">
      <el-button
          :type="type === 'card'?'primary':''"
          @click="()=>type = 'card'"
      >{{ $i18n.zhToGlobal('列表模式') }}
      </el-button>
      <el-button
          :type="type === 'map'?'primary':''"
          @click="()=>type = 'map'"
      >{{ $i18n.zhToGlobal('地图模式') }}
      </el-button>
    </div>

    <el-button
        @click="toDashboard"
        style="position: fixed;bottom:10px;right:10px"
    >{{ $i18n.zhToGlobal('打开仪表盘') }}
    </el-button>

  </div>
</template>

<style scoped lang="scss">

.card {
  position: relative;
  margin: 10px;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  width: 300px;
  display: inline-block;

  .card-header {
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;

    .card-title {
      font-size: 16px;
      font-weight: bold;

      .card-sn {
        font-size: 12px;
        font-weight: lighter;
        margin-left: 10px;
        float: right;
      }
    }

  }

  .card-body {
    padding: 10px;

    .card-text {
      font-size: 14px;
    }
  }
}

.scrollbar {
  height: 100px;
  overflow: auto;
  padding: 10px;

  .el-scrollbar__wrap {
    padding: 0;
  }

  .el-scrollbar__view {
    padding: 0;
  }

  .el-scrollbar__bar {
    background-color: #e8e8e8;
  }

  .el-scrollbar__thumb {
    background-color: #999;
  }
}

.card-lon-lat {
  font-size: 12px;
  font-weight: lighter;
  padding: 10px;
  cursor: pointer;
}

.card-lon-lat:hover {
  opacity: .6;
}

.card-lon-lat:active {
  opacity: 1;
}

.icon-edit {
  cursor: pointer;
}

.icon-delete {
  cursor: pointer;
}

.icon-btn:hover {
  transform: scale(1.1);
}

.icon-btn:active {
  transform: scale(1);
}

.scrollbar-box {
  height: calc(100vh - 120px);
  padding: 10px;
  text-align: center;
}

.bottom {
  position: fixed;
  bottom: 10px;
}

.map-box {
  width: 100%;
  height: calc(100vh - 120px);
  border-radius: 5px;
  overflow: hidden;
}
</style>